<template>
	<view class="">
		<!-- #ifdef MP-WEIXIN -->
			<view class="" v-if="!userInfo" style="position: absolute; padding: 30upx 10upx; width: 500upx; height: 380upx; top: 30%; text-align: center; border-radius: 30upx; margin-left: 140upx; z-index: 9999; background-color: #ffffff;">
				<image style="width: 140upx; height: 140upx;"
				 :src="imglink + 'person.svg'" mode=""></image>
				<view class="" style="font-size: 40upx; font-weight: bold; color: rgba(0,0,0,0.85); margin-top: 20upx;">
					您还未登录
				</view>
				<view style="font-size: 28upx;color: rgba(0,0,0,0.45);">
					需要登录后才能查看
				</view>
				<button style="width: 370upx; z-index: 9999; margin-top: 30upx; font-size: 28upx; background: #02C15F;border-radius: 8px;"
				  type="primary" open-type="getUserInfo" 
				  @click="getuserinfo">授权登录</button>
			</view>
		<!-- #endif -->
		<view class="inviti-act-content">
			<view class="inviti-act-title">
				{{storeTitle}}
			</view>
			<view class="inviti-act-header">
				<view class="inviti-act-header-msg">
					<image :src="storeUser.avatar" mode=""></image>
					<view class="">
						<view>{{storeUser.nickname}}</view>
						<view>诚邀请你加入团队</view>
					</view>
				</view>
				<!-- <image :src="imglink + 'home/act_details.png'" mode=""></image> -->
			</view>
		</view>
		<view class="new-staff-msg">
			<view class="popup_box_title">
				<view class="popup-line"></view>
				<view class="">新成员加入团队必填信息</view>
				<view class="popup-line" style="margin-left: 20upx;"></view>
			</view>
			<view class="order-phone-input">
				<view class="">
					<text>*</text>联系姓名
				</view>
				<input type="text" v-model="userName" placeholder="请输入联系姓名"/>
			</view>
			<view class="order-phone-input">
				<view class="">
					<text>*</text>联系号码
				</view>
				<input type="text" v-model="userPhone" placeholder="请输入联系手机号"/>
			</view>
			<view class="order-phone-input">
				<view class="">
					<text>*</text>微信号
				</view>
				<input type="text" v-model="userWeChat" placeholder="请输入微信号"/>
			</view>
			<view class="uplode-code-details">
				<view class="uplode-code-details-content">
					<view class="uplode-code-content">
						<view class=""><text>*</text>请上传你的微信二维码</view>
						<view class="uplode-code-content-details" @click="uplodeCode" v-if="tempFilePaths ==''">
							<image :src="imglink + 'member/add-code.png'" mode=""></image>
							<view class="">
								上传图片
							</view>
						</view>
						<image :src="tempFilePaths" mode="" v-else @click="uplodeCode"></image>
					</view>
					<view class="example-code">
						<view class="">例如：</view>
						<image :src="imglink + 'qrcode-demo.jpg'" mode=""></image>
					</view>
				</view>
				<view class="uplode-code-details-tip">
					如何获取：点开微信 > 我的>个人信息 > 我的二维码 > 长按保存
				</view>
			</view>
			<view class="join-btn" @click="judgeMsg">
				立刻加入
			</view>
		</view>
	</view>
</template>

<script>
	import {uploadFile} from '@/common/alioss.js'
	import { testLogin, userLogin, newInfo, login } from '@/common/login.js';
	export default{
		data(){
			return{
				tempFilePaths:'',
				userName:'',
				userPhone:"",
				userWeChat:'',
				currentPge:'',
				token:'',
				storeUser:{},
				storeTitle:"",
				userInfo:'',
				imglink: this.$store.state.imgLink
			}
		},
		onLoad(options) {
			this.$store.commit('updataShare', 1)
			// #ifdef H5
				let pages = getCurrentPages()
				this.currentPge = pages[0].$route.fullPath
			// #endif
			
			
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			let token = options.token;
			if(!token){
				token = uni.getStorageSync('token')
			}else{
				uni.setStorageSync('token', token);
			}
			this.token = token
			this.$store.commit('updateToken',token)
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			console.log(this.store_id,'store_id')
			console.log(this.token,'token')
			console.log(this.$store.getters.getToken,'this.$store.getters.getToken')
			this.userInfo = uni.getStorageSync("userInfo")
			if(!this.$store.getters.getToken){
				console.log('111111111')
				uni.removeStorageSync('token')
				// #ifdef H5
					location.href = this.$store.state.URL + "/customer/user/wx_login?page=" + encodeURIComponent(this.currentPge)
				// #endif
				// #ifdef MP-WEIXIN
					userLogin().then((res)=>{
						console.log(res)
						console.log(555555)
					});
				// #endif
			}else{
				this.gainStoreMsg()
			}
			// #ifdef H5
				//  去除分享链接中分享者的token
				const stateObj = this.currentPge
				let pattern = /(&token+.*&)|(&token+.*)/
				this.currentPge = this.currentPge.replace(pattern, '&')
				history.replaceState(stateObj, "", this.currentPge)
			// #endif
			// // #ifdef MP-WEIXIN
			// 	userLogin().then((res)=>{
			// 		console.log(res)
			// 		console.log(555555)
			// 	});
			// // #endif
			
		},
		onShow() {
			this.gainStoreMsg()
			// if(this.$store.getters.getToken){
			// }
		},
		methods:{
			getuserinfo() {
				
				//#ifdef MP-WEIXIN
				userLogin().then((res)=>{
					console.log(res)
					console.log(555555)
					this.userInfo = uni.getStorageSync("userInfo")
					this.gainStoreMsg()
				});	
				//#endif
			},
			judgeMsg(){
				let data = {
					token:this.token,
					store_id:this.store_id
				}
				this.$api.judge_is_staff(data).then(res => {
					console.log(res)
					if(res.status){
						if(res.jud == 2){
							uni.showToast({
								title:'您已是本店铺的员工，请勿再次添加！',
								icon:'none',
								duration:2000
							})
							setTimeout(()=> {
								uni.navigateTo({
									url:'../recommend/recommend?store_id=' + this.$store.getters.getStoreId
								})
							},1000)
							// return false
						}else{
							this.joinStore()
						}
						
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 验证信息
			verification(){
				let flag = true
				let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
					regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im,
					regEeChat = /^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/;
				if (regEn.test(this.userName) || regCn.test(this.userName)) {
					uni.showToast({
						title: "联系人姓名不能包含特殊字符",
						duration: 2000,
						mask: true,
						icon: "none"
					})
					return flag = false
				}
				if(this.userName == ''){
					uni.showToast({
						title:'联系人姓名不得为空',
						icon:"none",
						duration:2000
					})
					return flag = false
				}
				if(this.userPhone == ''){
					uni.showToast({
						title:'联系人号码不得为空',
						icon:"none",
						duration:2000
					})
					return flag = false
				}
				if (!(/^1[3456789]\d{9}$/.test(this.userPhone))) {
					uni.showToast({
						title: '手机号码有误，请重填',
						duration: 2000,
						icon: "none",
						position: "top",
						mask: true
					});
					return flag = false
				}
				if(this.userWeChat == ''){
					uni.showToast({
						title:'联系人微信号不得为空',
						icon:"none",
						duration:2000
					})
					return flag = false
				}
				console.log(!regEeChat.test(this.userWeChat))
				console.log(!(/^1[3456789]\d{9}$/.test(this.userPhone)))
				// if((!regEeChat.test(this.userWeChat)) || (!(/^1[3456789]\d{9}$/.test(this.userPhone)))){
				// 	uni.showToast({
				// 		title:'请输入正确的微信号',
				// 		icon:'none',
				// 		duration:2000
				// 	})
				// 	return flag = false
				// }
				if(this.tempFilePaths == ''){
					uni.showToast({
						title:'微信二维码不得为空',
						icon:"none",
						duration:2000
					})
					return flag = false
				}
				return flag
			},
			joinStore(){
				let time = new Date()
				let y = time.getFullYear()
				let m = time.getMonth()+1
				let d = time.getDay()
				let h = time.getHours()
				let min = time.getMinutes()
				let sec = time.getSeconds()
				// this.judgeMsg()
				if(this.verification()){
					let data = {
						token:this.token,
						type: 1,
						store_id:this.$store.getters.getStoreId,
						name:this.userName,
						telephone:this.userPhone,
						wechat_number:this.userWeChat,
						wechat_qrcode:this.tempFilePaths,
						role:1,
						status:1,
						date_added:`${y}-${m}-${d} ${h}:${min}:${sec}`
					}
					this.$api.set_staff(data).then(res => {
						console.log(res)
						if(res.status){
							uni.navigateTo({
								url:'../home/home?store_id=' + this.$store.getters.getStoreId
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			gainStoreMsg(){
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.$store.getters.getStoreId
				}
				this.$api.gain_store_staff(data).then(res => {
					console.log(res)
					if(res.status){
						this.storeTitle = res.userInfo.name
						this.storeUser = res.userInfo.user_info
						console.log(this.storeUser,"？？？？？？？？？？？？？？？？",this.storeTitle);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			uplodeCode(){
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
				    success: (chooseImageRes) => {
						// if (!/\.(gif|jpg|jpeg|png|bmp)$/.test(chooseImageRes.tempFiles[0].name)) {
						// 	uni.showToast({
						// 		title:'图片类型必须为gif/jpg/jpeg/png/bmp',
						// 		icon:'none',
						// 		duration:2000
						// 	})
						// 	return false;
						// }
						console.log(chooseImageRes)
				        // this.tempFilePaths = chooseImageRes.tempFilePaths[0];
					    uni.getImageInfo({
						    src: chooseImageRes.tempFilePaths[0],
						    success: (img) => {
								uni.showLoading({
									title: '图片上传中'
								})
								uploadFile(chooseImageRes.tempFilePaths[0]).then(res => {
									console.log(res)
									if(res.status){
										this.tempFilePaths = res.data.url
										// this.list.image[index]= res.data.url
										uni.hideLoading()
									}
								}).catch(err => {
									console.log(err)
								})
							}
				       })
				    }
				});
			}
		},
		onUnload() {
			wx.reLaunch({
				url: '/pages/recommend/recommend?store_id=' + this.store_id
			})
		}
	}
</script>

<style>
	page{
		background: #F3F3F4;
		padding-bottom: 30upx;
		box-sizing: border-box;
	}
	.inviti-act-content{
		width: 100%;
		background: #FFFFFF;
	}
	.inviti-act-title{
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		padding: 30upx;
		color: #333333;
		font-size: 30upx;
	}
	.inviti-act-header{
		width: 100%;
		padding: 16upx 30upx 36upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.inviti-act-header-msg{
		display: flex;
		margin-top: 28upx;
	}
	.inviti-act-header-msg>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.inviti-act-header-msg>view{
		margin-left: 20upx;
	}
	.inviti-act-header-msg>view>view:first-child{
		color: #333333;
		font-size: 34upx;
	}
	.inviti-act-header-msg>view>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 4upx;
	}
	.inviti-act-header>image{
		width: 154upx;
		height: 120upx;
	}
	.new-staff-msg{
		width: 100%;
		margin-top: 20upx;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
		padding-bottom: 30upx;
	}
	.popup_box_title{
		width: 100%;
		display: flex;
	}
	.popup-line{
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #DEDEDE;
		margin-top: 56upx;
		margin-left: 60upx;
		margin-right: 20upx;
	}
	.popup_box_title>view:nth-child(2){
		color: #333333;
		font-size: 34upx;
		margin-top: 30upx;
		font-weight: 800;
	}
	.order-phone-input{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		margin-top: 30upx;
		border-radius: 4upx;
		background: #F5F5F5;
		display: flex;
	}
	.order-phone-input>view{
		height: 100%;
		width: 30%;
		background: #ECECEC;
		padding-left: 20upx;
		box-sizing: border-box;
		color: #333333;
		font-size: 28upx;
		text-align: left;
	}
	.order-phone-input>view>text{
		color: #FF391F;
		display: inline-block;
		margin-right: 6upx;
	}
	.order-phone-input>input{
		width: 70%;
		height: 100%;
		padding: 0 20upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
	.uplode-code-details{
		width: 100%;
		padding: 28upx 0 30upx 0 ;
		box-sizing: border-box;
		border-top: 1upx solid #DEDEDE;
		margin-top: 40upx;
	}
	.uplode-code-details-tip{
		color: #999999;
		font-size: 24upx;
		margin-top: 30upx;
	}
	.uplode-code-details-content{
		display: flex;
	}
	.uplode-code-content{
		width: 284upx;
	}
	.uplode-code-content>image{
		width: 100%;
		height: 284upx;
		margin-top: 20upx;
	}
	.uplode-code-content>view:first-child{
		color: #333333;
		font-size: 24upx;
	}
	.uplode-code-content>view:first-child>text{
		color: #FF391F;
	}
	.uplode-code-content-details{
		width: 100%;
		height: 284upx;
		background: #F4F5F9;
		padding-top: 88upx;
		box-sizing: border-box;
		margin-top: 10upx;
	}
	.uplode-code-content-details>image{
		width: 64upx;
		height: 64upx;
		margin-left: 110upx;
	}
	.uplode-code-content-details>view{
		text-align: center;
		color: #666666;
		font-size: 24upx;
		margin-top: 10upx;
	}
	.example-code{
		width: 284upx;
		margin-left: 92upx;
	}
	.example-code>view{
		color: #333333;
		font-size: 24upx;
	}
	.example-code>image{
		width: 100%;
		height: 284upx;
		margin-top: 10upx;
	}
	.join-btn{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 44upx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		margin: 0 auto;
		font-size: 32upx;
		margin-top: 52upx;
	}
</style>
